@extends('layouts.app')

@section('content')
    <div class="card">
        <div class="card-header">添加接口</div>
        <div class="card-body">
            @include('layouts._formerrors')
            <form method="post" action="{{ $article ? route('articles.update', [$article]) : route('articles.store') }}">
                @if($article)
                    <input type="hidden" name="_method" value="PUT">
                    <input type="hidden" name="id" value="{{ $article->id ?? "" }}">
                @endif
                <div class="form-group">
                    <label for="type_id">分类</label>
                    <select name="type_id" id="type_id" class="form-control" >
                        <option value="">=请选择=</option>
                        @foreach($types as $type)
                            <option value="{{ $type->id }}" @if(($article && $article->type_id === $type->id) || (!$article && session('article_type_id') == $type->id)) selected @endif>{{ $type->title }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label for="article-name">名称</label>
                    <input type="text" name="name" value="{{ $article->name ?? old('name') }}" class="form-control" id="article-name" placeholder="请输入接口名称" >
                </div>
                <div class="form-group">
                    <label for="article-value">值</label>
                    <input type="text" name="value" class="form-control" id="article-value" style="display: none">
                    <div id="jsoneditor" style="width: 100%; height: 400px;"></div>
                </div>
                <button type="submit" onclick="return getJSON()" class="btn btn-primary">提交</button>
                @csrf
            </form>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/jsoneditor.min.js"></script>
    <script>
        $("#list-article").addClass('active');
        let editor;
        $(function () {
            // create the editor
            const container = document.getElementById("jsoneditor")
            const options = {
                mode: 'tree',
                modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
                onModeChange: function (newMode, oldMode) {
                    //console.log('Mode switched from', oldMode, 'to', newMode)
                }
            }
            editor = new JSONEditor(container, options)

            // set json

            const initialJson =
            @if($article)
                @json(json_decode($article->value, true));
            @elseif(session('article_value'))
                @json(session('article_value'));
            @else
                {
                    param1: "",
                    param2: "",
                    param3: ""
                }
            @endif
            editor.set(initialJson)
            // get json

        });

        function getJSON() {
            const updatedJson = JSON.stringify(editor.get());
            if (updatedJson === '{}'){
                layer.msg("接口数据不能为空");
                return false;
            }
            const name = $('#article-name').val();
            if (name === ''){
                layer.msg("接口名称不能为空");
                return false;
            }
            const type = $('#type_id').val();
            if (type === ''){
                layer.msg("接口分类不能为空");
                return false;
            }
            $('#article-value').val(updatedJson);
            return true;
            // let form = document.forms;
            // form[0].submit();
        }
    </script>
@endpush


